<template>
    <div class="house_page">
        <div class="img_list">
            <div class="img_item" v-for="(item, index) in codeImgList" :key="index">
                <image @click="previewImg(item)" :src="item.imgUrl" mode="aspectFit" />
                <i @click="delMaterial(item)" class="delete icon-close"></i>
            </div>

            <div class="wfull">
                <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
            </div>
        </div>
        <div class="add_material" @click="addNewImgs('open')">+添加图片</div>

        <pub-lo-popup 
            title="新增图片" 
            ref="addImgsRef" 
            type="center" 
            @cancel="addNewImgs('cancel')"
            @confirm="addNewImgs('confirm')"
            showCancel>
            <div class="pad-b30">
                <div class="flex mar-b20" @click="selectFromMaterial('open')">
                    <span class="flex-1">从素材库中选择</span>
                    <i class="fs20 color-999 mar-l10 icon-arrow-right"></i>
                </div>
                <div>
                    <pub-upload-img 
                        width="180rpx" 
                        height="180rpx" 
                        :limit="9"
                        v-model="addNew.imgUrlList"></pub-upload-img>
                </div>
                
            </div>
        </pub-lo-popup>
    </div>
</template>

<script>
import { getUserImgs, batchAddUserImgs, deleteUserImages } from '@/request/house'
export default {
    name: "",
    components: {},
    data() {
        return {
            codeId: '',
            codeImgList: [],
            scroll: {
                page: 1,
                size: 14,
                loading: false,
                max: false,
                noData: false,
            },
            addNew: {
                imgUrlList: []
            }
            
        }   
    },
    onLoad({ codeId }) {
        this.codeId = codeId
        this.onRefresh()
    },
    onReachBottom() {
        this.onInfinite()
    },
    methods: {
        getImgList(complete) {
            getUserImgs({
                fromId: this.codeId,
                typeKind: '01',
                fileType: '00', //00 图片 ， 01视频
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
            }, { complete }).then(res => {
                if(this.scroll.page == 1) {
                    this.codeImgList = res.data.list
                } else {
                    this.codeImgList = this.codeImgList.concat(res.data.list)
                }
                this.scroll.max = this.codeImgList.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.list = []
            this.getImgList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getImgList(() => {
                this.scroll.loading = false
            })
        },
        typeChange(e) {
            let index  = e.target.value
            this.addNew.houseGroupId = this.typeList[index].id
            this.addNew.houseGroupName = this.typeList[index].groupName

        },
        async delMaterial(item) {
            let action = await this.$interact.modal({
                title: '提示',
                content: '是否删除图片？',
                showCancel: true
            })
            if(!action.confirm) return;
            deleteUserImages({
                fileType: '00',
                typeKind: '01',
                fromId: this.codeId,
                imgIds: item.id,
                delStatus: '01'
            }).then(res => {
                this.$interact.toast(res.msg)
                this.onRefresh()
            })

        },
        addNewImgs(type) {
            if(type == 'open') {   
                this.$refs.addImgsRef.open()
            } else if(type  == 'cancel') {
                this.$refs.addImgsRef.close()
            } else if(type  == 'confirm') {
                if(!this.addNew.imgUrlList.length) return this.$interact.toast('请上传图片')
                batchAddUserImgs({
                    fileType: '00',
                    typeKind: '01',
                    fromId: this.codeId,
                    imgUrls: this.addNew.imgUrlList.join(',')
                }).then(res => {
                    this.getImgList()
                    this.addNewImgs('cancel')
                })

            }
        },
        previewImg(item) {
            uni.previewImage({
                current: item.imgUrl,
                urls: this.codeImgList.map(i => i.imgUrl)
            })
        },
        selectFromMaterial(e) {
            if(e == 'open') {
                this.$navigate.to('/pages/admin/house/imgMaterial?isSelect=1')
            } else {
                if(Array.isArray(e)) {
                    this.addNew.imgUrlList.push(...e.map(i => i.fileUrl))
                }
            }
        }
    }
}
</script>
<style lang="less" scoped>
    @import "~@/styles/cell.less";

.house_page{
    width: 100%;
    height: 100%;
}

.img_list{
    width: 100%;
    padding: 20rpx 20rpx 20rpx;
    overflow: auto; 
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    .img_item{
        width: 225rpx;
        height: 225rpx;
        margin-bottom: 20rpx;
        margin-right: 16rpx;
        position: relative;
        &:nth-child(3n) {
            margin-right: 0;
        }
        image{
            width: 100%;
            height: 100%;
            background: #ccc;
        }
        .delete{
            width: 50rpx;
            height: 50rpx;
            position: absolute;
            right: 10rpx;
            top: 10rpx;
            border-radius: 50%;
            color: red;
            background: rgba(230, 205, 205, 0.5);
            backdrop-filter: blur(5px);
            font-size: 28rpx;
            .align(center);
        }
    }
}
.add_material{
    width: 400rpx;
    height: 70rpx;
    font-size: 30rpx;
    border-radius: 70rpx;
    line-height: 70rpx;
    text-align: center;
    margin: 20rpx auto;
    background: @mainColor;
    color: #fff;
    position: sticky;
    bottom: 20rpx;
}

</style>